<template>
  <div
    style="
      height: 100%;
      margin-top: -40px;
      display: flex;
      justify-content: center;
      align-items: center;
    "
  >
    <a-result
      status="403"
      title="401"
      sub-title="对不起，您没有权限访问此页面。"
      v-if="hasRoute"
    >
      <template #extra>
        <a-button type="primary" @click="backHome">回到首页</a-button>
      </template>
    </a-result>
    <a-result
      status="404"
      title="404"
      sub-title="对不起，您访问的页面不存在。"
      v-else
    >
      <template #extra>
        <a-button type="primary" @click="backHome">回到首页</a-button>
      </template>
    </a-result>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { routes } from '@/router'
import { match } from 'path-to-regexp'
import Path from 'path-browserify'
let router = useRouter()
let route = useRoute()
function backHome() {
  router.replace('/')
}
let hasRoute = computed(() => {
  let routePrivate = routes.find(route => route.name === 'private')
  return routePrivate.children.some(({ path }) => {
    let fn = match(Path.join('/private', path), {
      encode: encodeURIComponent,
    })
    return !!fn(route.path)
  })
})
</script>
